<template>
	<view class="container">
		<view class="content">
			<view class="item">
				<view class="label">
					头像
				</view>
				<view class="value">
					<button class="avatar-wrapper" style="border: none;" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image class="avatar" :src="userInfo.avatarUrl"></image>
					</button>
					<u-icon name="arrow-right" size="38" color="#778899"></u-icon>
				</view>
			</view>
			<view class="item">
				<view class="label">
					昵称
				</view>
				<view class="value">
					<input type="nickname" class="input" placeholder="请输入昵称" maxlength="15" v-model="userInfo.nickName"
						@change="getNickname" />
						<u-icon name="arrow-right" size="38" color="#778899"></u-icon>
				</view>
			</view>
		</view>
		<view class="btn" @tap="submit">
			保存
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive, onMounted } from 'vue'
	import { $http, getAppId, toLogin } from "@/common"
	import NavigationBar from "@/components/NavigationBar/NavigationBar.vue"
	import {
		onInit,
		onLoad,
		onReady,
		onShow,
		onHide,
		onUnload,
		onResize,
	} from '@dcloudio/uni-app'
	const userInfo = ref({})
	onLoad(() => {
		if (uni.getStorageSync('userInfo') && JSON.parse(uni.getStorageSync('userInfo'))) {
			userInfo.value = JSON.parse(uni.getStorageSync('userInfo'))
		}
	})
	onShow(() => {
		//console.log(appId,'appId')
	})
	const nickName = ref('')
	const avatarUrl = ref('https://hr-api.lanbeiduo.com/api/file/download/f5rdqmhEOh_noBody.png')
	function getNickname(val) {
		console.log(val, 'nnn')
	}
	function onChooseAvatar(e) {
		console.log(e, 'eeeeeeeeee')
		uni.uploadFile({
			url: `${import.meta.env.VITE_BASE_URL}/api/file/upload`,
			filePath: e.detail.avatarUrl,
			name: 'file',
			header: {
				['token']:uni.getStorageSync('token')
			},
			success(res) {
				let fileRes = JSON.parse(res.data)
				console.log(fileRes)
				if (fileRes.code == 200) {
					userInfo.value.avatarUrl = fileRes.result
				}
			}
		})
	}
	const getPhoneNumber = (e) => {
		if (e.detail.errMsg == 'getPhoneNumber:ok') {
			const params = {
				appId: getAppId(),
				code: e.detail.code
			}
			$http.post('getPhoneNumber', params).then(res => {
				console.log(res, '手机号')
			})
		}
	}
	function onSwiperLeft() {
		console.log('Swiper left')
	}
	function onSwiperRight() {
		console.log('Swiper right')
	}
	function submit(){
		if(!userInfo.value.avatarUrl){
			uni.showToast({
				title: '请上传头像!',
				icon: 'none'
			})
			return
		}
		if(!userInfo.value.nickName){
			uni.showToast({
				title: '请填写昵称!',
				icon: 'none'
			})
			return
		}
		$http.post("userModify",userInfo.value).then(res=>{
			$http.get('userInfo').then(res2 => {
				uni.setStorageSync('userInfo', JSON.stringify(res2))
				uni.showToast({
					title: '保存成功!',
					icon: 'none'
				})
				setTimeout(()=>{
					uni.navigateBack()
				},500)
			})
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		background-color: #F9F9F9;
		padding: 20rpx;
		.content{
			background-color: #fff;
			padding: 30rpx 20rpx;
		}
		.item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
			.label{
				
			}
			.value{
				flex: 1;
				display: flex;
				justify-content: flex-end;
				.avatar-wrapper{
					.avatar{
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
					}
				}
				.input{
					text-align: right;
				}
			}
		}
		.btn{
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			bottom: 200rpx;
			width: 600rpx;
			height: 76rpx;
			color: #fff;
			font-size: 32rpx;
			font-weight: bold;
			border-radius: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #1667EA;
		}
	}
</style>